<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>第一个 ECharts 实例</title>
    <script
      src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"
      type="text/javascript"
    ></script>
    <div id="getJsonpByJquery">111</div>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      var data;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      //myChart.showLoading();  // 开启 loading 效果
      $("#getJsonpByJquery").click(function () {
        $.ajax({
          //   url: "https://www.runoob.com/static/js/echarts_test_data.json",
          url: "https://www.runoob.com/static/js/echarts_test_data.json",
          //   dataType: "json",
          dataType: "jsonp",
          jsonp: "callback",
          //   type: "post",
          //   contentType: "application/json",
          success: function (data) {
            // this.data = data.data_pie;
            console.log(data);
          },
        });
      }),
        myChart.setOption({
          series: [
            {
              name: "访问来源",
              type: "pie", // 设置图表类型为饼图
              radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
              data: data,
            },
          ],
        });
    </script>
  </body>
</html>
